<template>
<div class="parent">
  <el-container>
  <el-header>一个工具箱 - 好用的在线工具都在这里！
</el-header>
  <el-container>
    <el-aside >
        <div>
            <h1>在线驾校</h1>
             <h1>汇率查询</h1>
              <h1>智能问答</h1>
               
        </div>
    </el-aside>
    <el-main>
          <div class="tuij">
      <h1>推荐</h1>
      <div class="dianji">
          <img src="https://cdn.free-api.com/aamab-jrtlr.webp" alt="" >
          <p>在线驾校</p> 
         <router-link to="/jx"> <el-button type="primary">立即使用</el-button></router-link>
          
      </div>
       <div class="dianji">
          <img src="" alt="" >
          <p>汇率查询</p> 
         <router-link to="/jx"> <el-button type="primary">立即使用</el-button></router-link>
          
      </div>
       <div class="dianji">
          <img src="https://www.jisuapi.com/static/images/iconv2/iqa.png" alt="" >
          <p>智能问答</p> 
         <router-link to="/jx"> <el-button type="primary">立即使用</el-button></router-link>
          
      </div>
    </div>
    </el-main>
  </el-container>
</el-container>  
<div class="yejiao">
  <h2>其他小工具正在开发中...</h2>
  </div>  

</div>

</template>

<script>
export default {

}
</script>

<style>
body{
 
  height: 100%;
}

.yejiao{
  text-align: center;
}

 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 100px;
    
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    height: 100%;
    
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  .tuij{
    margin-left: 10px;
    display: flex;
    width: 100%;
    
  }
  .dianji{
    
    box-shadow: 10px 10px 10px 10px #888888;
    text-align:center;
    margin-left: 50px;
    width: 33.3%;
    
    
    
  }
  .dianji img{
    width: 100%;
    height: 80%;
  }
  
  @media only screen and (min-device-width:100px) and (max-device-width:500px){
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 20px;
    display: none;
    
  }
  .tuij{
    margin-left: 10px;
    /* display: flex; */
    width: 100%;
    height: 100%;
    
  }
  .dianji{
    
    box-shadow: 10px 10px 10px 10px #888888;
    text-align:center;
    margin-left: 50px;
    width: 33.3%;
    

    
    
    
  }
  .dianji img{
    width: 100%;
    height: 80%;
  }
  body{
    height: 100%;
    
  }

  }
</style>
